<template>
  <div class="home-container" :class="[componentKey]">
    <!-- 操作 -->
    <div class="operate-btns">
      <div
        class="back-home"
        @click="gotoBack()"
        title="项目列表"
        v-if="userAccount == 'projectListPage'"
      ></div>
      <div class="system" @click="gotoSystem()" title="进入系统"></div>
      <div class="close" @click="handleLogout()" title="退出系统"></div>
    </div>
    <div class="group-btns">
      <div
        class="item-btn"
        :class="[componentKey == 'rendering' && 'active_1']"
        @click="handleChangeBtn('rendering')"
      ></div>
      <div
        class="item-btn"
        :class="[componentKey == 'promotionalVideo' && 'active_2']"
        @click="handleChangeBtn('promotionalVideo')"
      ></div>
      <div class="item-btn"></div>
      <div
        class="item-btn"
        :class="[componentKey == 'bimModel' && 'active_4']"
        @click="handleChangeBtn('bimModel')"
      ></div>
    </div>
    <!-- 项目概况按钮 -->
    <div
      class="project-btn"
      :class="[projectModal.visible && 'select']"
      @click="handleProject()"
    ></div>
    <div class="home-body">
      <components
        :is="componentKey"
        :visible="componentVisible"
        :soucre="soucre"
      ></components>
    </div>
    <div class="layer"></div>
    <!-- 项目概况弹窗 -->
    <projectModal :visible.sync="projectModal.visible"></projectModal>
    <!--  -->
    <div class="left-container"></div>
    <div class="right-container"></div>
    <div class="plan-container"></div>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
import { mapActions, mapGetters } from "vuex";
//效果图
import rendering from "./components/rendering";
//宣传视频
import promotionalVideo from "./components/promotionalVideo";
//bim模型
import bimModel from "./components/bimModel";
//项目概况
import projectModal from "./components/projectModal";
export default {
  components: {
    rendering,
    promotionalVideo,
    bimModel,
    projectModal,
  },
  data() {
    return {
      componentKey: "rendering",
      componentVisible: true,
      soucre: {},
      //项目概况
      projectModal: {
        visible: false,
      },
    };
  },
  computed: {
    ...mapGetters(["userAccount"]),
  },
  mounted() {
    console.log(localStorage.getItem("CURRENT_PROJECT_CODE"), "项目编码");
    this.getData();
  },
  methods: {
    gotoBack() {
      this.$router.push({
        path: "/projectHome",
      });
    },
    ...mapActions(["Logout"]),
    //进入系统
    gotoSystem() {
      this.$router.push({
        path: "/system/portal/index",
      });
    },

    //退出登录
    handleLogout() {
      let that = this;
      this.$confirm({
        title: "提示",
        content: "真的要注销登录吗 ?",
        okText: "确认",
        cancelText: "取消",
        closable: true,
        centered: true,
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk: () => {
          return this.Logout({})
            .then(() => {
              setTimeout(() => {
                this.$router.push({
                  path: "/user/login?type=private",
                });
              }, 16);
            })
            .catch((err) => {
              this.$message.error({
                title: "错误",
                description: err.message,
              });
            });
        },
        onCancel() {},
      });
    },

    // 是否需要验证码
    getData() {
      axios
        .get(
          `/report/reportVisual/detail?id=C706134A743C4AF699767378907C5D64`,
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {})
        .catch();
    },

    //Tab切换
    handleChangeBtn(type) {
      this.componentVisible = false;
      setTimeout((_) => {
        this.componentKey = type;
        this.componentVisible = true;
      }, 300);
    },

    //项目概况
    handleProject() {
      this.projectModal.visible = true;
    },

    //查询当前日期
    getNowDate() {
      let date = new Date();
      const YY = date.getFullYear();
      const MM =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      const DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      const weekdays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const dayIndex = date.getDay();
      //   let nowDate =
      //     YY + "年" + MM + "月" + DD + "日" + " " + weekdays[dayIndex];
      let nowDate = YY + "-" + MM + "-" + DD;
      return nowDate;
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  &.rendering {
    background: url(~@/assets/img/home/bg_1.png);
    background-size: 100% 100%;
  }
  &.promotionalVideo {
    background: url(~@/assets/img/home/bg_2.png);
    background-size: 100% 100%;
  }
  &.bimModel {
    background: url(~@/assets/img/home/bg_3.png);
    background-size: 100% 100%;
  }
  .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/home/layer.png);
    background-size: 100% 100%;
    z-index: 999;
    pointer-events: none;
  }
  .group-btns {
    position: absolute;
    top: 108px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 1001;
    .item-btn {
      cursor: pointer;
      width: 140px;
      height: 40px;
      margin-right: 24px;
      &:nth-child(1) {
        background: url(~@/assets/img/portalEntry/btn_icon_1.png);
        background-size: 100% 100%;
      }
      &:nth-child(2) {
        background: url(~@/assets/img/portalEntry/btn_icon_3.png);
        background-size: 100% 100%;
      }
      &:nth-child(3) {
        background: url(~@/assets/img/portalEntry/btn_icon_5.png);
        background-size: 100% 100%;
      }
      &:nth-child(4) {
        background: url(~@/assets/img/portalEntry/btn_icon_7.png);
        background-size: 100% 100%;
        margin-right: 0;
      }
      &.active_1 {
        background: url(~@/assets/img/portalEntry/btn_icon_2.png);
        background-size: 100% 100%;
      }
      &.active_2 {
        background: url(~@/assets/img/portalEntry/btn_icon_4.png);
        background-size: 100% 100%;
      }
      &.active_4 {
        background: url(~@/assets/img/portalEntry/btn_icon_8.png);
        background-size: 100% 100%;
      }
    }
  }
  .project-btn {
    position: absolute;
    top: 108px;
    right: 496px;
    z-index: 1001;
    width: 64px;
    height: 66px;
    background: url(~@/assets/img/portalEntry/project_btn.png);
    background-size: 100% 100%;
    cursor: pointer;
    &.select {
      background: url(~@/assets/img/portalEntry/project_select.png);
      background-size: 100% 100%;
    }
  }
  .operate-btns {
    position: absolute;
    top: 14px;
    right: 38px;
    display: flex;
    align-items: center;
    z-index: 1001;
    .back-home {
      margin-right: 20px;
      width: 18px;
      height: 18px;
      background: url(~@/assets/img/portalEntry/back_home.png);
      background-size: 100% 100%;
      cursor: pointer;
      pointer-events: all;
    }

    .system {
      margin-right: 20px;
      width: 18px;
      height: 18px;
      background: url(~@/assets/img/portalEntry/system.png);
      background-size: 100% 100%;
      cursor: pointer;
      pointer-events: all;
    }
    .close {
      cursor: pointer;
      width: 18px;
      height: 18px;
      background: url(~@/assets/img/portalEntry/clsoe.png);
      background-size: 100% 100%;
      pointer-events: all;
    }
  }

  .home-body {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .left-container {
    width: 426px;
    height: 838px;
    position: absolute;
    top: 60px;
    left: 26px;
    background: url(~@/assets/img/home/left.png);
    background-size: 100% 100%;
    z-index: 999;
  }
  .right-container {
    width: 424px;
    height: 838px;
    position: absolute;
    top: 60px;
    right: 26px;
    background: url(~@/assets/img/home/right.png);
    background-size: 100% 100%;
    z-index: 999;
  }
  .plan-container {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 840px;
    height: 114px;
    background: url(~@/assets/img/home/plan.png);
    background-size: 100% 100%;
    z-index: 999;
  }
}
</style>
